<template>
	<el-container>
	  <el-header class="header">
		  <span style="color: white; font-size: large;">超市管理系统</span>
	  </el-header>
	  <el-container>
	    <el-aside width="200px" class="aside">
			<el-row class="tac">
				<el-col :span="24">
				    <el-menu
				      default-active="1"
				      class="el-menu-vertical-demo"
				      @open="handleOpen"
				      @close="handleClose"
				      background-color="#545c64"
				      text-color="#fff"
				      active-text-color="#ffd04b">
				      <el-menu-item index="1" @click="page=1">
				        <i class="el-icon-goods"></i>
				        <span slot="title">商品销售管理</span>
				      </el-menu-item>
				      <el-menu-item index="2" @click="page=2">
				        <i class="el-icon-shopping-cart-1"></i>
				        <span slot="title">商品进货管理</span>
				      </el-menu-item>
					  <el-menu-item index="3" @click="page=3">
					    <i class="el-icon-s-home"></i>
					    <span slot="title">商品库存管理</span>
					  </el-menu-item>
					  <el-menu-item index="4" @click="page=4">
					    <i class="el-icon-user"></i>
					    <span slot="title">超市人员管理</span>
					  </el-menu-item>
					  <el-submenu index="5" >
						  <template slot="title">
						            <i class="el-icon-s-finance"></i>
						            <span slot="title">财务管理</span>
						</template>
					    
						<el-menu-item-group>    
						    <el-menu-item index="5-1" @click="page=5">
								<template slot="title">
									<i class="el-icon-circle-close"></i>
									<span slot="title">未核实</span>
								</template>
							</el-menu-item>
						    <el-menu-item index="5-2" @click="page=7">
								<template slot="title">
									<i class="el-icon-circle-check"></i>
									<span slot="title">已核实</span>
								</template>
								</el-menu-item>
						</el-menu-item-group>
					  </el-submenu>
					  
					  <el-menu-item index="6" @click="exit">
					    <i class="el-icon-close"></i>
					    <span slot="title">退出登录</span>
					  </el-menu-item>
				    </el-menu>
				  </el-col>
				</el-row>
		</el-aside>
	    <el-main class="main">
			<div v-show="page==1">
				<sale></sale>
			</div>
			<div v-show="page==2">
				<comein></comein>
			</div>
			<div v-show="page==3">
				<inventory></inventory>
			</div>
			<div v-show="page==4">
				<people></people>
			</div>
			<div v-show="page==5">
				<finance></finance>
			</div>
			
			<div v-show="page==7">
				<finance3></finance3>
			</div>
		</el-main>
	  </el-container>
	</el-container>
</template>

<script>
	import comein from '../components/Comein/comeinmanage.vue'
	import inventory from '../components/Inventory/inventorymanage.vue'
	import people from '../components/People/peoplemanage.vue'
	import sale from '../components/Sale/salesmanage.vue'
	import finance from '../components/finance/finance.vue'
	
	import finance3 from '../components/finance/finance3.vue'
	export default {
		name: 'menu',
		components:{
			comein,
			inventory,
			people,
			sale,
			finance,
			
			finance3,
		},
		data(){
			return {
				page:1,
			}
		},
		 methods: {
		      handleOpen(key, keyPath) {
		        console.log(key, keyPath);
		      },
		      handleClose(key, keyPath) {
		        console.log(key, keyPath);
		      },
			  exit() {
				  this.$router.push('/');
			  }
		    }
	}
</script>

<style>
	.header {
	    background-color: #545c64;
	    color: #333;
	    text-align: center;
	    line-height: 40px;
	  }
	  
	  .aside {
	      background-color: #545c64;
		  height: 703px;
	      color: #333;
	      text-align: center;
	      line-height: 200px;
	    }
	  
	  .main {
	    color: #333;
	    text-align: center;
	    line-height: 160px;
	  }
</style>